<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <!-- <ul>
            <li class="active">11</li>
            <li>22</li>
            <li class="active box">33</li>
            <span>444</span>
            <span>555</span>
        </ul> -->

        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>

        </ul>
        <button>添加li元素</button>
    </div>
   
    <script>
        // 一、事件委托 ：利用事件的传播机制，把一个元素的事件委托给另外一个元素执行；
        //  ul里有1000个li 那么需要给1000个li都绑定点击事件 ？

        // var lis = document.querySelectorAll("li");
        // lis.forEach(function(li){
        //     li.onclick = function(){
        //         console.log("点击了");
        //     }
        // })


        // 事件委托的写法 ：
        // 把li的事件委托给父级ul元素；
        // var ulEle = document.querySelector("ul");
        // ulEle.onclick = function(e){
        //     // console.log("点击了");
        //     // 通过一些特征 把需要的元素区分出来；
        //     // console.log(this);
        //     var target = e.target;
        //     // console.log(target);
        //     // 通过标节点名称称区分不同的标签
        //     // if(target.nodeName==="LI"){
        //     //     console.log("点击了li元素");
        //     // }

        //     // 通过类名区分 不同的元素
        //     // 判断类名里时候包含某个类名 
        //     if( target.classList.contains("active")){
        //         console.log("点击了类名包含active的元素");
        //     }
        // }

        // 二 、应用场景 
        // 注意：可以委托给父级 ，也可以委托给父级的父级 。一般不超过三层 ；
        // 1.元素过多；逻辑比较复杂；
        // 2.动态的添加子元素事件 ；

        // 普通写法实现 li事件绑定
        // var lis = document.querySelectorAll("li");
        // var ulEle = document.querySelector("ul");
        // lis.forEach(function(li){
        //     li.onclick = function(){
        //         console.log("点击了");
        //     }
        // })

        // document.querySelector("button").onclick = function(){
        //     var liEle = document.createElement("li");
        //     liEle.innerHTML = "新建的内容";
        //     ulEle.appendChild(liEle);
        // }



        // 事件委托实现li绑定
        var ulEle = document.querySelector("ul");
        // 把li的事件委托给 ul了 。和li就没有关系了；
        ulEle.onclick = function(e){
            var target = e.target;
            if(target.nodeName ==="LI"){
                console.log("点击了");
            }
        }
        document.querySelector("button").onclick = function(){
            var liEle = document.createElement("li");
            liEle.innerHTML = "新建的内容";
            ulEle.appendChild(liEle);
        }


        // 1.写一遍 2.把 学员系统里的删除事件委托给tr 元素； 
    </script>
</body>
</html>